<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <PersonDis :personData="personData" :personCount="getPersonCount"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <QuesDis :quesData="getQuesData" :quesCount="getQuesCount"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <UserActive :Xdata="Xdata" :Ydata="Ydata"/>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PersonDis from '@/components/charts/PersonDis.vue';
import QuesDis from '@/components/charts/QuesDis.vue';
import UserActive from '@/components/charts/UserActive.vue';

import {adminDashboard} from '@/api/dashboard/dashboard'

export default {
  name: 'Dashboard',
  components:{
    PersonDis,
    QuesDis,
    UserActive
  },
  data(){
    return{
      // 首页题目的数据
      quesData:[],
      personData:[],
      Xdata:[],
      Ydata:[]
    }
  },
  created(){
    this.searchIndex();
  },
  methods:{
    async searchIndex(){
        let res = await adminDashboard();
        this.quesData = res.data.quesData;
        this.personData = res.data.personData;
        this.Xdata = res.data.xdata;
        this.Ydata = res.data.ydata;
        console.log("===>",this.Xdata);
    }
  },
  computed: {

    getPersonCount(){
      let count = 0;
      this.personData.forEach(ele=>{
        count += ele.value;
      })
      return count;
    },
    getQuesCount(){
        let count = 0;
        this.quesData.forEach(ele=>{
            count += ele.value;
        })
          return count;
        },

    getQuesData(){
      return this.quesData;
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.box-card{
  width: 600px;
}
</style>
